<template>
	<view class='productSort copy-data' :style=" viewColor +'height'+pageHeight">
		<!-- #ifdef APP-PLUS || MP -->
		<!-- <view class="sys-head" :style="{height:sysHeight}"></view> -->
		<!-- #endif -->
		<!-- <view class="page_hd">
		    <view class="rtbus-searchbar-frame">
		        <view class="rtbus-searchbar-button">
					<text class='iconfont icon-ic_search color-999'></text>
		            <input @input="sugKeyWord" class="rtbus-search-bar__input" :focus="inputFocus" placeholder="到达城市/景点"
		                   placeholderClass="input-placeholder" type="text" :value="inputVal"></input>
		            <view @click="clearInput" class="rtbus-icon-clear" v-if="inputVal">
		                <text class="iconfont icon-ic_close1 color-999"></text>
		            </view>
		        </view>
		    </view>
		</view> -->
		<view class="page-content">
			<view class="kind_list page_bd_spacing" v-if="showSugResult&&sugList.length&&inputVal">
			     <scroll-view scrollY class="kind_list">
					<!-- #ifdef MP -->
					<view class="histroy-content" v-for="(item,index) in sugList" :key="index">
					    <view @click.stop="selectCityH5(item)" class="kind-list__item-hd" :data-city="item">
					        <view class="histroy-item kind-list__item-hd">
					           
					            <view class="kind-list__item">
					                <view class="rtbus-busroute-label flex-row-between">
										<view  class="city-t" v-if="item.type==1"> 城市</view >
										<view  class="station-t" v-if="item.type==2"> 站点</view >
					                    <view class="rtbus-busroute-name">
											<texthighlight :text="item.name" :keyword="inputVal"></texthighlight>
										</view>
					                </view>
					            </view>
					        </view>
					        <view v-if="index!=0" class="kind-list-seperater-line"></view>
					    </view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 || APP-PLUS -->
			         <view class="histroy-content" v-for="(item,index) in sugList" :key="index">
			             <view @click.stop="selectCityH5(item)" class="kind-list__item-hd" :data-city="item">
			                 <view class="histroy-item kind-list__item-hd">
			                     
			                     <view class="kind-list__item">
			                         <view class="rtbus-busroute-label flex-row-between">
			                             <view class="rtbus-busroute-name">
			                             	<texthighlight :text="item.name" :keyword="inputVal"></texthighlight>
			                             </view>
			                         </view>
			                     </view>
			                 </view>
			                 <view v-if="index!=0" class="kind-list-seperater-line"></view>
			             </view>
			         </view>
					<!-- #endif -->
			     </scroll-view>
			 </view>
			<view  class="search-empty" v-if="!canNotFindResult"  style="z-index:1000;height: 90vh;padding-bottom: 100px;">
				<emptyPage title="未找到匹配的城市～" :noImage="`${domain}/static/images/noRecord.png`"></emptyPage>
			</view>
		</view>
		<view class="scroll-box" v-if="!inputVal">
			<view class='aside'>
				<scroll-view scroll-y="true" scroll-with-animation='true' style="height: calc(100%)">
					<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
						v-for="(item,index) in cityList" :key="index" @click='tap(index,"b"+index)'>
						<text>{{item.name}}</text>
					</view>
				
				</scroll-view>
			</view>


			<view class='conter'>
				<scroll-view scroll-y="true" :scroll-into-view="toView" @scroll="scroll" scroll-with-animation='true'
					style="height: 100%;" class="conterScroll">
					<block v-for="(item,index) in cityList" :key="index">
						<view class='listw' :id="'b'+index">
							<view class='title acea-row row-center-wrapper'>
								<view class='line'></view>
								<view class='name'>{{item.name}}</view>
								<view class='line'></view>
							</view>
							<view class='list acea-row'>
								<view  @click="selectCityH5(item)" class='item acea-row  row-middle row-column'>
									<text class='name line2'>{{item.name}}</text>
									<!-- <text class="text-12 color-999">所有景点/站点</text> -->
								</view>
								<block  v-for="(itemn,indexn) in item.children" :key="indexn">
									<view @click="selectCityH5(itemn)" class='item acea-row  row-middle'>
										<text class='name line2'>{{itemn.name}}</text>
									</view>
								</block>
							</view>
						</view>
					</block>
					<view :style='"height:"+(height-300)+"rpx;"' v-if="number<15"></view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getCategoryList
	} from '@/api/store.js';
	import { getSelectCityList, endCityListSearch } from '@/api/api.js';
	import {
		mapState,
		mapGetters
	} from "vuex"
	import Cache from '@/utils/cache';
	import { CITY_INFO} from '@/config/cache.js'
	import emptyPage from '@/components/emptyPage.vue'
	import texthighlight from '@/components/texthighlight/index.vue'
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	
	export default {
		computed: mapGetters([ 'viewColor']),
		
		components: {
			emptyPage,texthighlight
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				navlist: [],
				cityList: [],
				navActive: 0,
				number: "",
				is_diy: uni.getStorageSync('is_diy'),
				height: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0,
				footH: 0,
				windowHeight: 0,
				newData: {},
				activeRouter: '',
				pageHeight: '100%',
				sysHeight: sysHeight,
				// #ifdef APP-PLUS
				pageHeight: app.globalData.windowHeight,
				// #endif
				lock: false,
				start_city_id: '',
				start_stop_id: '',
				inputFocus: false,
				inputVal: "",
				showSugResult: false,
				historyList: [],
				sugList: [],
				canNotFindResult: !0,
			}
		},
		onLoad(options) {
			this.start_city_id = options.start_city_id;
			this.start_stop_id = options.start_stop_id;
			this.getList()
		},
		
		mounted() {
			let that = this
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			this.activeRouter = '/' + curRoute
		
	     
		},
		methods: {
			getList(){
				var that = this;
				getSelectCityList({
					start_city_id: this.start_city_id,
					start_stop_id: this.start_stop_id,
				}).then(res => {
					that.cityList = res.data;
					that.$nextTick(res => {
						that.infoScroll();
					})
				})
			},
			sugKeyWord(t) {
			    var e = this;
			    e.inputVal = t.detail.value;
			
				if(t.detail.value!=''){
					endCityListSearch({
						start_city_id: this.start_city_id,
						start_stop_id: this.start_stop_id,
						keywords: t.detail.value.trim()
				    }).then(res => {
					    var re = res, res = re.data;
					    res.length > 0 ? (e.sugList = res, e.canNotFindResult = !0, e.showSugResult = true) : (e.sugList = [], e.canNotFindResult = !1, e.showSugResult = true);
									
					}).catch(err => {
						this.$util.Tips({title: err.message})
					})
				}
			},
			clearInput: function () {
			    var e = this;
			    e.inputFocus = true,
			        e.sugList = [],
			        e.inputVal = ""
			    e.showSugResult = false,
			        e.canNotFindResult = !0;
			},
			selectCityH5(item){
				console.log("item1",item)
				Cache.set(CITY_INFO,item)
				// var pages = getCurrentPages();
				// var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				//uni或者vue用$vm
				// prevPage.$vm.selectCityHand = true
				uni.navigateBack({//返回
					delta: 1
				})
			},
			
			
			infoScroll: function() {
				let that = this;
				let len = that.cityList.length;
				this.number = that.cityList[len - 1].children.length;
				//设置产品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let height = 0;
				let hightArr = [];
				// for (let i = 0; i < len; i++) {
				// 	//获取元素所在位置
				// 	let query = uni.createSelectorQuery().in(this);
				// 	let idView = "#b" + i;
				// 	query.select(idView).boundingClientRect();
				// 	query.exec(function(res) {
				// 		let top = res[0].top;
				// 		hightArr.push(top);
				// 		that.hightArr = hightArr
				// 	});
				// };
				const query = uni.createSelectorQuery();
				query.selectAll('.conter > .listw').boundingClientRect();
				query.exec(function(res) {
					console.log(res[0]);
					let items = res[0];
					let scrollList = [];
					for (let i in items) {
						let nowS = 0;
						nowS = items[i].top ;
						scrollList.push(nowS);
					}
					that.hightArr = scrollList;
					console.log("hightArr",that.hightArr)
				});
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
				this.$set(this, 'lock', true);
				uni.$emit('scroll');
			},
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				if (this.lock) {
					this.$set(this, 'lock', false);
					return;
				}
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
				uni.$emit('scroll');
			},
			
		}
	}
</script>
<style scoped lang="scss">
	::v-deep uni-scroll-view {
		padding-bottom: 0 !important;
	}

	

	.productSort {
		display: flex;
		flex-direction: column;
		//#ifdef MP
		height: calc(100vh - var(--window-top)) !important;
		//#endif
		//#ifndef MP
		height: 100vh //#endif
	}

	
	.productSort .scroll-box {
		flex: 1;
		overflow: hidden;
		display: flex;
	}

	// #ifndef MP
	uni-scroll-view {
		padding-bottom: 100rpx;
	}

	// #endif

	.productSort .aside {
		width: 180rpx;
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f7;
	}

	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		text-align: center;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		font-weight: bold;
		color: var(--view-theme);
	}

	.productSort .conter {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 0 14rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 20rpx;
	}

	.productSort .conter .listw {
		padding-top: 20rpx;
	}

	.productSort .conter .listw .title {
		height: 90rpx;
	}

	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}

	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		width: 245rpx;
		margin-top: 26rpx;
		border: 1px solid #ececec;
		border-radius: 5px;
		height: 40px;
		// line-height: 40px;
		margin-right: 10px;
		padding: 0 5px;
		justify-content: center;
	}

	.productSort .conter .list .item .picture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	// .productSort .conter .list .item .picture image {
	// 	width: 100%;
	// 	height: 100%;
	// 	border-radius: 50%;
	// }

	.productSort .conter .list .item .picture {

		::v-deep ,
		::v-deep image,
		::v-deep .easy-loadimage,
		::v-deep uni-image {

			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}

	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		// height: 40px;
		// line-height: 40px;
		// width: 200rpx;
		text-align: center;
		color: #000;
	}
	.page_hd {
			    background: #fff;
		}
		.histroy-list {
		}
		
		.histroy-content {
		    margin: 0 32rpx;
			border-bottom: 1px solid #e5e5e5;
		}
		
		.histroy-content:last-child {
		   border-bottom: none;
		}
		.histroy-item {
		    display: flex;
		}
		
		.histroy-item-icon {
		    width: 40rpx;
		    height: 86rpx;
		    display: flex;
		    justify-content: center;
		    align-content: center;
		    margin-top: 46rpx;
		    margin-right: 24rpx;
		}
		
		.histroy-item-icon image {
		    width: 40rpx;
		    height: 40rpx;
		}
		
		
		.page-content {
		    /* position: absolute; */
		    top: 152rpx;
		    bottom: 0;
		    width: 100vw;
			background: #ffff;
		}
		
		.kind_list {
		    /* position: absolute; */
		    top: 0;
		    bottom: 0;
		    width: 100vw;
		}
		
		.rtbus-search-bar__box {
		    position: relative;
		    padding-left: 32rpx;
		    padding-right: 40px;
		    width: 100%;
		    box-sizing: border-box;
		    z-index: 1;
		}
		.rtbus-icon-clear {
		    padding-left: 40rpx;
		    padding-right: 40rpx;
		    font-size: 0;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    flex: 0;
		}
		
		.rtbus-icon-clear .icon {
		    height: 40rpx;
		    width: 40rpx;
		}
		
		.rtbus-search-bar__input {
		    position: relative;
		    height: 75rpx;
		    margin-left: 20rpx;
		    color: rgba(128,128,128,1);
		    opacity: 0.6;
		}
		
		.rtbus-searchbar-frame {
		    position: relative;
		    padding-top: 20rpx;
		    padding-left: 28rpx;
		    padding-right: 28rpx;
		    padding-bottom: 20rpx;
		    border-bottom: 1rpx solid #f2f2f2;
		    box-shadow: 0 6px 6px -6px rgba(0,0,0,0.06);
		    display: flex;
		}
		
		.rtbus-searchbar-button {
		    position: relative;
		    width: 100%;
		    height: 92 rpx;
		    line-height: 92 rpx;
		    border-radius: 40rpx;
		    border-color: #f6f6f6;
		    border-width: 0rpx;
		    background: #f6f6f6;
		    z-index: 1;
		    display: flex;
		    justify-content: space-between;
		    padding-left: 32rpx;
			align-items: center;
		}
		
		.rtbus-searchbar-button-title {
		    margin-top: 18rpx;
		    line-height: 56rpx;
		    height: 56rpx;
		    border-right: solid 1rpx rgba(27,45,118,0.12);
		    font-size: 32rpx;
		    color: #333333;
		    display: flex;
		}
		
		.rtbus-searchbar-button-name {
		    max-width: 130rpx;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		}
		
		.rtbus-searchbar-button-arrow {
		    height: 20rpx;
		    width: 20rpx;
		    margin-left: 20rpx;
		    margin-right: 26rpx;
		    margin-top: 18rpx;
		}
		
		.rtbus-search-bar__input {
		    position: relative;
		    height: 92 rpx;
		    font-size: 32 rpx;
		    flex: 1;
		}
		
		.rtbus-searchbar-label {
		    position: relative;
		    z-index: 2;
		    padding-left: 32rpx;
		    text-align: left;
		    color: #888888;
		    line-height: 92rpx;
		    font-size: 32rpx;
		}
		
		.input-placeholder {
		    color: #888888;
		}
		.kind-list__item {
		    flex: 1;
		    background-color: #fff;
		    border-radius: 4rpx;
		    overflow: hidden;
		    display: flex;
		    flex-direction: column;
		    // border-bottom: 1px solid #e5e5e5;
		    padding: 24rpx 0 20rpx 0;
		}
		
		.kind-list__item:first-child {
		    margin-top: 0;
		}
		
		.kind-list__img {
		    width: 60rpx;
		    height: 60rpx;
		}
		
		.kind-list__item-hd {
		    padding: 0;
		    transition: opacity 0.3s;
		}
		
		.kind-list__item-hd_show {
		    opacity: 0.4;
		}
		
		.kind-list__item-bd {
		    height: 1rpx;
		    overflow: hidden;
		    background: #e5e5e5;
		}
		
		.kind-list__item-bd_show {
		    height: auto;
		}
		
		.kind-list-seperater-line {
		    height: 1px;
		    background: white;
		    margin-top: 10rpx;
		    vertical-align: bottom;
		}
		
		.rtbus-busroute-label {
		    position: relative;
		    background: white;
		    font-family: PingFangSC-Medium;
		    line-height: 48rpx;
		    height: 48rpx;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		.rtbus-busroute-name {
		    flex: 1;
		    padding-right: 20rpx;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		}
		
		.rtbus-busroute-icon {
		    display: inline-block;
		    width: 40rpx;
		    height: 40rpx;
		    margin-top: 4rpx;
		    vertical-align: top;
		}
		
		.rtbus-desc-label {
		    position: relative;
		    background-color: #fff;
		    height: 36rpx;
		    line-height: 36rpx;
		    color: #777777;
		    font-size: 26rpx;
		    max-width: 60vw;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
		}
		
		.rtbus-noopen-text {
		    font-family: PingFangSC-Regular;
		    font-size: 13px;
		    color: #777777;
		    letter-spacing: 0;
		    width: 200rpx;
		    flex: 0;
		}
		
		.rtbus-white-space {
		    height: 20rpx;
		    background: #fff;
		    margin-left: 20rpx;
		    margin-right: 20rpx;
		    vertical-align: bottom;
		}
		.city-t {
			background-color: #e8f7ff;
			color: #70bae6;
			padding: 0 4px;
			font-size: 10px;
			margin-right: 8px;
			height: 15px;
			line-height: 15px;
		}
		.station-t {
			background-color: #fff8e8;
			color: #ffb87b;
			padding: 0 4px;
			font-size: 10px;
			margin-right: 8px;
			height: 15px;
			line-height: 15px;
		}

</style>
